<template>
	<div class="login">
		<div class="header" :style="{paddingTop: statusHeight}"></div>
		<div class="form">
			<div class="title">账号登录</div>
			<div class="rows">
				<div class="row">
					<text class="label">+86</text>
					<input placeholder="请输入您的手机号" :maxlength="11"/>
				</div>
				<div class="row">
					<input placeholder="请输入您的验证码" :maxlength="6"/>
					<div class="smsBtn">发送验证码</div>
				</div>
			</div>
			<div class="submitBtn">登录</div>
		</div>
		<safe-area></safe-area>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		computed: {
			statusHeight() {
				return `${uni.getSystemInfoSync().statusBarHeight}px`;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			width: 100%;
			height: 44px;
			flex-shrink: 0;
		}

		.form {
			width: 650rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			&::before {
				content: "";
				flex: 1;
			}

			&::after {
				content: "";
				flex: 5;
			}
			
			.title {
				width: 100%;
				font-size: 64rpx;
				padding-bottom: 64rpx;
			}
			
			.rows {
				width: 100%;
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				.row {
					width: 100%;
					padding: 36rpx 0;
					display: flex;
					align-items: center;
					border-bottom: 1px solid $uni-border-2;
					.label {
						padding-right: 16rpx;
						flex-shrink: 0;
						font-size: 32rpx;
					}
					input {
						flex: 1;
						font-size: 36rpx;
					}
					.smsBtn {
						width: 180rpx;
						height: 56rpx;
						border-radius: 56rpx;
						border: 1px solid $uni-error;
						color: $uni-error;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
			.submitBtn {
				margin-top: 100rpx;
				width: 100%;
				height: 80rpx;
				border-radius: 80rpx;
				background-color: $uni-primary;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>